<template>
	<view class = "repassword">
		
		<view class="content">
			<view class="backTollogin" @tap = "backTollogin">
				返回
			</view>
			<view class="main">
				<view class="head">
					若你忘记了密码，可在此重置新密码
				</view>
				<wInput
				    v-model="tel"        
				    type="text"               
				    maxlength="11"            
				    placeholder="请输入电话号码"
				></wInput>
				
				<wInput
				    v-model="passData"        
				    type="password"           
				    placeholder="请输入新密码"  
				    isShowPass               
				></wInput>
				
				<wInput
					v-model="verCode"
					type="number"
					maxlength="4"
					placeholder="验证码"
					
					isShowCode
					codeText="获取重置码"
					setTime="30"
					ref="runCode"
					@setCode="getVerCode()"
				></wInput>
			</view>
			
			<wButton
				text="重置密码"
				bgColor="#354E44"
				:rotate="isRotate" 
				@click.native="startRePass()"
			></wButton>
		</view>
		
	</view>
</template>

<script>
	var _this 
	import wInput from '@/components/watch-login/watch-input.vue' //input
	import wButton from '@/components/watch-login/watch-button.vue' //button
	export default {
		data() {
			return {
				tel:'',  // 电话号码
				passData:'',  //密码
				verCode:'',  //验证码
				isRotate: false, //是否加载旋转
			};
		},
		components:{
			wInput,wButton
		},
		methods:{
			backTollogin(){
				uni.navigateTo({
					url:"/pages/mine/login/login"
				})
			},
			//自定义事件
			getVerCode(){
			    //获取验证码
				if(this.tel.length != 11){
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
			    console.log("获取验证码")
			    //触发倒计时（一般用于请求成功验证码后调用）
			    this.$refs.runCode.$emit('runCode');
				uni.showToast({
				    icon: 'none',
					position: 'bottom',
				    title: '模拟倒计时触发'
				});
			
			    //终止倒计时（用于突然需要终止倒计时的场景）
				setTimeout(() =>{
					this.$refs.runCode.$emit('runCode',0);
					uni.showToast({
					    icon: 'none',
						position: 'bottom',
					    title: '模拟倒计时终止'
					});
				},3000)
			    
			},
			startRePass(){
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				};
				if(this.tel.length != 11){
					uni.showToast({
						position:"bottom",
						icon:"none",
						title:"请输入正确的电话号码"
					})
					return false;
				};
				if(this.passData.length < 6){
					uni.showToast({
						position:"bottom",
						icon:"none",
						title:"请输入正确的密码"
					})
					return false;
				};
				if(this.verCode.length != 4){
					uni.showToast({
						position:"bottom",
						icon:"none",
						title:"请输入正确的验证码"
					})
					return false;
				};
				console.log("重置密码成功");
				this.isRotate=true;
				setTimeout(()=>{
					this.isRotate = false;
				},3000)
			}
		}
			
	}
</script>

<style lang="scss">
	.repassword{
		width:750rpx;
		height: 100vh;
		background-color:wheat;
		padding:0.1rpx;
		.backTollogin{
			margin:10px;
			font-weight:bolder;
		}
		.head{
			text-align: center;
			font-size:20rpx;
			margin-top:30rpx;
			margin-bottom:20rpx;
		}
		.mobile{
			width:536rpx;
			height: 94rpx;
			margin-left:108rpx;
			border-radius: 14rpx;
			margin-bottom:40rpx;
			border-radius:50rpx;
			display:flex;
			justify-content: space-around;
			align-items:center;
			border:1rpx yellowgreen solid;
			font-size: 20rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
		}
		.password{
			width:536rpx;
			height: 94rpx;
			margin-left:108rpx;
			border-radius: 14rpx;
			margin-bottom:40rpx;
			border-radius:50rpx;
			display:flex;
			justify-content: space-around;
			align-items:center;
			border:1rpx yellowgreen solid;
			font-size: 20rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
		}
		.keyname{
			width:536rpx;
				height: 94rpx;
				margin-left:108rpx;
				border-radius: 14rpx;
				margin-bottom:80rpx;
				border-radius:50rpx;
				display:flex;
				justify-content: space-around;
				align-items:center;
				border:1rpx yellowgreen solid;
				font-size: 20rpx;
				color: #FFFFFF;
				letter-spacing: 2.14rpx;
				.left{
					// margin-left:60rpx;
					text-indent: 20rpx;
				}
				.right{
					color:gray;
					font-size:12rpx;
				}
		}
		.repasswords{
			width:536rpx;
			height: 94rpx;
			margin-left:108rpx;
			background: #354E44;
			border-radius: 14rpx;
			margin-bottom:100rpx;
			border-radius:20rpx;
			display:flex;
			justify-content: space-around;
			align-items:center;
			border:1rpx black solid;
			font-size: 30rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
			font-weight: bolder;
		}
	}
	
</style>
